---
title: Esquema de Cores
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Cartão de Esquema de Cores

Representa diferentes esquemas de cores e é especialmente desenvolvido para temas claros e escuros.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Props            | Tipo                                     | Descrição                                                                                       | Padrão |
| ---------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------- | ------ |
| variante         | Nome opcional para estilização adicional | A variante do esquema de cores. As opções incluem `Escuro`, `Claro` e `Sistema` | claro  |
| selected         | booleano                                 | Se `true`, exibe uma marca de seleção para indicar o esquema de cores selecionado               |        |
| additional props | `React.ComponentPropsWithoutRef<'div'>`  | Standard HTML `div` element props                                                               |        |

</Tab>

</Tabs>

## Seleção de Esquema de Cores

Permite que os usuários escolham entre diferentes esquemas de cores.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Props    | Tipo               | Descrição                                                                                    |
| -------- | ------------------ | -------------------------------------------------------------------------------------------- |
| valor    | `Esquema de Cores` | O esquema de cores atualmente selecionado                                                    |
| onChange | função             | A função de callback que você deseja acionar quando um usuário seleciona um esquema de cores |

</Tab>

</Tabs>
